<template>
  <page-header-wrapper :title="false">
    <div class="Role">
      <a-spin tip="加载中..." class="position" v-if="roleLoading"> </a-spin>
      <typicalSearch ref="insideSearch" :searchConfig="searchConfig" @searchMethod="getTableData"></typicalSearch>
      <div class="table">
        <div class="tableTitle">
          <div class="title">历史设备事件及告警</div>
        </div>
        <div class="tableList">
          <typicalTable
            ref="insideTable"
            :tableConfig="tableConfig"
            :tableData="tableData"
            @getTableData="getTableData"
          >
          </typicalTable>
        </div>
      </div>
    </div>
  </page-header-wrapper>
</template>
<script>
import { listCabinetBinFaults } from '@/api/api';
import moment from 'moment';
import typicalSearch from '@/components/typicalSearch';
import typicalTable from '@/components/typicalTable';
import Input from '@/components/typicalControl/Input';
import InputNumber from '@/components/typicalControl/InputNumber';
import treeSelect from '@/components/typicalControl/treeSelect';
import Select from '@/components/typicalControl/select';
import Button from '@/components/typicalControl/button';
// import { getFaultName } from '@/utils/frequentInterface';
import { equipmentMonitoring, listEnumsByType, listNetworksAll } from '@/api/cabin';
import { organizationsTree } from '@/api/system';

export default {
  name: 'AlarmInformation',
  components: {
    typicalSearch: typicalSearch,
    typicalTable: typicalTable,
    Input: Input,
    InputNumber: InputNumber,
    treeSelect: treeSelect,
    Select: Select,
    Button: Button,
  },
  data() {
    return {
      roleLoading: false, // 加载表格的loading
      detailsVisible: false,
      // 搜索组件配置
      searchConfig: {
        formItemList: [
          {
            type: 'selectTree',
            prop: 'searchOrganizationId',
            value: undefined,
            label: '组织机构',
            treeData: [],
            select: this.searchOptListDynamicLoading,
          },
          {
            type: 'select',
            prop: 'searchNetworkId',
            value: undefined,
            label: '场站网点',
            optList: [],
          },
          {
            type: 'input',
            prop: 'searchKeyWord',
            value: undefined,
            label: '编码/名称',
            placeholder: '请输入充电柜编码/名称',
          },
          {
            type: 'input',
            prop: 'searchBinIndex',
            value: undefined,
            label: '格口序号',
            placeholder: '请输入格口序号',
          },
          {
            type: 'input',
            prop: 'searchFaultName',
            value: undefined,
            label: '名称',
          },
          {
            type: 'select',
            prop: 'searchLevel',
            value: undefined,
            multiple: 'multiple',
            label: '级别',
            optList: [],
          },
          {
            type: 'rangeDatePicker',
            prop: 'searchReceiveTimeBegin&searchReceiveTimeEnd',
            format: 'YYYY-MM-DD HH:mm:ss',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            showTime: true,
            value: [
              moment(new Date()).hours(0).minutes(0).seconds(0).format('YYYY-MM-DD HH:mm:ss'),
              moment(new Date()).hours(23).minutes(59).seconds(59).format('YYYY-MM-DD HH:mm:ss'),
            ],
            label: '发生时间',
          },
        ],
        parent: this,
      },
      // 列表组件配置
      tableConfig: {
        columns: [
          {
            title: '场站名称',
            dataIndex: 'chargingNetworkName',
            ellipsis: true,
            width: '200px',
          },
          {
            title: '充电柜名称',
            dataIndex: 'chargingCabinetName',
            ellipsis: true,
            width: '200px',
          },
          {
            title: '充电柜编号',
            dataIndex: 'chargingCabinetCode',
            ellipsis: true,
            width: '200px',
          },
          {
            title: '格口序号',
            dataIndex: 'chargingCabinetBinIndex',
            ellipsis: true,
            width: '100px',
          },
          {
            title: '组织机构',
            dataIndex: 'organizationName',
            ellipsis: true,
            width: '200px',
          },
          {
            title: '设备型号',
            dataIndex: 'chargingCabinetModeName',
            ellipsis: true,
            width: '200px',
          },
          {
            title: '设备类型',
            dataIndex: 'chargingCabinetTypeName',
            ellipsis: true,
            width: '200px',
          },
          {
            title: '发生时间',
            dataIndex: 'occurrenceTime',
            customRender: this.formatterTime,
            width: '200px',
          },
          {
            title: '恢复时间',
            dataIndex: 'recoveryTime',
            customRender: this.formatterTime,
            width: '200px',
          },
          // {
          //   title: '故障名称',
          //   dataIndex: 'faultCode',
          //   ellipsis: true,
          //   customRender: getFaultName,
          //   width: '800px'
          // }

          {
            title: '名称',
            dataIndex: 'semaphoreName',
            ellipsis: true,
            width: '200px',
          },
          {
            title: '级别',
            dataIndex: 'protocolSemaphoreLevel',
            ellipsis: true,
            width: '200px',
            customRender: this.formatterLevel,
          },
        ],
        pageSize: this.$store.state.user.defaultPaginationPagesize,
        pageSizeOptions: this.$store.state.user.defaultPaginationOptions,
        parent: this,
      },
      // 列表组件数据
      tableData: {
        records: [],
        total: 0,
      },
      enumsTypeJson: {},
      oDictionary: {
        listNetworksAll: [],
      },
      originationCode: '',//组织机构code
    };
  },
  created() {
    this.getEnum();
    this.getDictionary();
  },
  mounted() {
    this.$refs.insideSearch.searchInfo();
  },
  methods: {
    getEnum() {
      listEnumsByType().then((res) => {
        let datas = res.data;
        for (const key in datas) {
          for (var i = 0; i < datas[key].length; i++) {
            datas[key][i].name = datas[key][i].label;
          }
        }
        this.enumsTypeJson = datas;

        for (var i = 0; i < this.searchConfig.formItemList.length; i++) {
          if (this.searchConfig.formItemList[i].prop == 'searchLevel') {
            this.searchConfig.formItemList[i].optList = this.enumsTypeJson['PROTOCOL_SEMAPHORE_LEVEL'];
            break;
          }
        }
      });
    },
    getDictionary() {
      // 组织列表树形结构数据
      organizationsTree().then((res) => {
        if (res.code == 200) {
          for (var i = 0; i < this.searchConfig.formItemList.length; i++) {
            if (this.searchConfig.formItemList[i].prop == 'searchOrganizationId') {
              this.searchConfig.formItemList[i].treeData = res.data;
              break;
            }
          }
        }
      });
      this.getNetworkData();
    },
    getNetworkData(organizationId) {
      // 场站网点
      listNetworksAll(`/selectChargingnetwork`, 'get', {
        pageNum: 1,
        pageSize: 100,
        organizationId: organizationId,
      }).then((res) => {
        if (res.code == 200) {
          this.oDictionary.listNetworksAll = res.data.records.map((n) => {
            return {
              name: n.name,
              code: n.id,
            };
          });
          for (var i = 0; i < this.searchConfig.formItemList.length; i++) {
            if (this.searchConfig.formItemList[i].prop == 'searchNetworkId') {
              this.searchConfig.formItemList[i].optList = this.oDictionary.listNetworksAll;
              break;
            }
          }
        }
      });
    },
    /**
     * [searchOptListDynamicLoading 搜索下拉动态加载]
     * @param  {[type]} searchOrganizationId [组织机构id]
     * @return {[type]}                      [description]
     */
    searchOptListDynamicLoading(e) {
      this.originationCode = e.code;
      this.oDictionary.listNetworksAll = [];
      this.getNetworkData(e.id);
    },
    // getFaultName,
    /**
     * [getTableData 获取表格数据]
     * @param  {[type]} searchParam [搜索条件]
     * @return {[type]}             [description]
     */
    getTableData(searchParam) {
      this.roleLoading = true;
      let searchData = searchParam ? { ...searchParam } : {};
      let params = {
        pageNum: searchData.pageNumber ? searchData.pageNumber + 1 : 1,
        pageSize: searchData.pageSize ? searchData.pageSize : 10,
        faultName: searchData.searchFaultName,
        chargingCabinetNameAndCode: searchData.searchKeyWord,
        occurrenceStartTime: searchData.searchReceiveTimeBegin,
        occurrenceEndTime: searchData.searchReceiveTimeEnd,
        binIndex: searchData.searchBinIndex,
        organCode: searchParam.searchOrganizationId ? this.originationCode : '',
        networkId: searchData.searchNetworkId,
        level:
          searchData.searchLevel && searchData.searchLevel.length > 0
            ? searchData.searchLevel.join(',')
            : searchData.searchLevel,
      };
      equipmentMonitoring('/selectHistoricAll', 'get', params)
        .then((res) => {
          if (res.code == 200 && res.data.records) {
            let datas = res.data;
            datas.total = Number(datas.total);
            this.tableData = datas;
          } else {
            this.tableData.records = [];
            this.tableData.total = 0;
          }
        })
        .finally(() => {
          this.roleLoading = false;
        });
    },
    formatterTime(val) {
      return val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : '';
    },
    formatterLevel(val) {
      let name = this.enumsTypeJson['PROTOCOL_SEMAPHORE_LEVEL'].filter((item) => item.code == val);
      return name.length > 0 ? name[0].name : val;
    },
  },
};
</script>

<style lang="less" scoped>
.Role {
  width: 100%;
  height: calc(100vh - 150px);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  position: relative;
  .position {
    width: 100%;
    height: 100%;
    background: white;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
  }
  .table {
    flex: 1;
    background: white;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    .tableTitle {
      width: 100%;
      height: 64px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ececec;
      padding: 0 20px;
      margin-bottom: 10px;
      .title {
        width: 80%;
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: 550;
      }
      .addButton {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
    }
    .tableList {
      // max-height: calc(100vh - 380px);
      // overflow: auto;
      /deep/ .tableScroll {
        max-height: calc(100vh - 380px);
        overflow: auto;
      }
    }
  }
}
#modalContent {
  width: 100%;
  height: 500px;
  overflow: auto;
  position: relative;
}
/deep/ .ant-input{
  padding: 4px 6px;
}
/deep/ .ant-calendar-picker{
  width: 140% !important;
}
</style>
